 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Contoso - Open positions</title>    
    <script type="text/javascript" src="js/MicrosoftAjax.js"></script>    
    <link rel="stylesheet" type="text/css" href="css/gadget.css" />
</head>

<body onload="init();">

<!--            DIV HEADER TITLE          -->

    <div id="gadget_title" style="z-index: 101; left: 3px; width: 128px; position: absolute;
        top: 33px; height: 24px">
        OPEN POSITIONS<div id="status">&nbsp;</div>
    </div>

<!--            DIVs POSITIONS                  -->

    <div id="position0" style="z-index: 102; left: 2px; width: 128px; position: absolute;
        top: 63px; height: 42px;"  >
        
        <div id="position-title0" class="position-title" style="z-index: 102; left: 0px; width: 128px; position: absolute;
        top: 0px; height: 14px;background-color:#B22222;border-top:1px solid black;border-bottom:1px solid black;padding-top:1px;">Position</div>
                        
        <div id="position-name0" class="position-name" style="z-index: 102; left: 0px; width: 128px; position: absolute;
        top: 14px; height: 14px;border-bottom:1px solid #FF9A00;padding-top:1px;"></div>
        
        <div class="position-ref" style="z-index: 100; left: 0px; width: 128px; position: absolute;
        top: 28px; height: 14px;padding-top:1px;">
            <span id="position-ref0" style="width: 70px;"></span><span style="width: 50px;"><a href="javascript:showPositionDetails(0);" class="moreinfo">more info</a></span>
        </div>
       
    </div>
    <div id="position1" style="z-index: 102; left: 2px; width: 132px; position: absolute;
        top: 105px; height: 42px; "  >
        
        <div id="position-title1" class="position-title" style="z-index: 102; left: 0px; width: 128px; position: absolute;
        top: 0px; height: 14px;background-color:#B22222;border-top:1px solid black;border-bottom:1px solid black;padding-top:1px;">Position</div>
                        
        <div id="position-name1" class="position-name" style="z-index: 102; left: 0px; width: 128px; position: absolute;
        top: 14px; height: 14px;border-bottom:1px solid #FF9A00;padding-top:1px;"></div>
        
        <div class="position-ref" style="z-index: 100; left: 0px; width: 128px; position: absolute;
        top: 28px; height: 14px;padding-top:1px;">
            <span id="position-ref1" style="width: 70px;"></span><span style="width: 50px;"><a href="javascript:showPositionDetails(1);" class="moreinfo">more info</a></span>
        </div>        
       
    </div>
    <div id="position2" style="z-index: 102; left: 2px; width: 132px; position: absolute;
        top: 147px; height: 42px; "  >
        
        <div id="position-title2" class="position-title" style="z-index: 102; left: 0px; width: 128px; position: absolute;
        top: 0px; height: 14px;background-color:#B22222;border-top:1px solid black;border-bottom:1px solid black;padding-top:1px;">Position</div>
                        
        <div id="position-name2" class="position-name" style="z-index: 102; left: 0px; width: 128px; position: absolute;
        top: 14px; height: 14px;border-bottom:1px solid #FF9A00;padding-top:1px;"></div>
        
        <div class="position-ref" style="z-index: 100; left: 0px; width: 128px; position: absolute;
        top: 28px; height: 14px;padding-top:1px;">
            <span id="position-ref2" style="width: 70px;"></span><span style="width: 50px;"><a href="javascript:showPositionDetails(2);" class="moreinfo">more info</a></span>
        </div>          
       
    </div>
    <div id="position3" style="z-index: 102; left: 2px; width: 132px; position: absolute;
        top: 189px; height: 42px;"  >
        
        <div id="position-title3" class="position-title" style="z-index: 102; left: 0px; width: 128px; position: absolute;
        top: 0px; height: 14px;background-color:#B22222;border-top:1px solid black;border-bottom:1px solid black;padding-top:1px;">Position</div>
                        
        <div id="position-name3" class="position-name" style="z-index: 102; left: 0px; width: 128px; position: absolute;
        top: 14px; height: 14px;border-bottom:1px solid #FF9A00;padding-top:1px;"></div>
        
        <div class="position-ref" style="z-index: 100; left: 0px; width: 128px; position: absolute;
        top: 28px; height: 14px;padding-top:1px;">
            <span id="position-ref3" style="width: 70px;"></span><span style="width: 50px;"><a href="javascript:showPositionDetails(3);" class="moreinfo">more info</a></span>
        </div>         
       
    </div>
<!--            DIVs FOOTER          -->

    <div id="foot" style="z-index: 204; left: 0px; width: 132px; position: absolute;
        top: 233px; height: 26px;border-top:1px solid black;"  >
        <div id="prevbutton" style="z-index: 107; left: 64px; width: 16px; position: absolute;
            top: 6px; height: 14px">
            <img src="images/prev.gif" width="16" height="14" id="img_prevbutton" alt="Previous" onclick="getPrevious();"  class="imglink" />
        </div>
        <div style="z-index: 109; left: 80px; width: 27px; position: absolute; top: 0px;
            height: 18px" id="labelPage">
        </div>
        <div id="nextbutton" style="z-index: 108; left: 107px; width: 25px; position: absolute;
            top: 6px; height: 14px">
            <img src="images/next.gif" width="16" height="14" id="img_nextbutton" alt="Next" onclick="getNext();" class="imglink" />
        </div>
        <div style="z-index: 110; left: 6px; width: 53px; position: relative; top: 5px;
            height: 9px" id="loading">
            <img src="images/bar_ajax_loading.gif" width="53" height="9" id="img1" alt="Refreshing..." />
        </div>
        <div style="z-index: 110; left: 6px; width: 100px; position: relative; top: 5px;
            height: 9px" id="statusLabel">
            
        </div>
    </div>
</body>
</html>
<script type="text/javascript"> 
    
    // Global Variables
    var _positions;
    var _actualPage = 1;
    var _pageSize = 4;
    var _prevButton = $get('img_prevbutton');
    var _nextButton = $get('img_nextbutton');
    var _myTimer;
    
    function init() 
    {        
        $get('loading').style.display = 'none';
        timerValue = parseInt('5000');
        clearInterval(_myTimer);
        clearPositions();        
        _myTimer = setInterval("CallOpenPositionService()", timerValue);
        CallOpenPositionService();
        System.Gadget.Flyout.file = "PositionDetails.html";        
        setPageButtons();          
    }    

    //===============================================
    // SERVICE CALLS
    //===============================================
    
    function CallOpenPositionService() 
    {        
            $get('loading').style.display = 'block';
            var http = getHTTPObject();           
            var uri = "http://services.litwarehr.com/UnSecureHost/feeds.svc/contoso/openPositions";
             
            http.open("GET", uri, false);
            
            http.onreadystatechange = function() {
                if (http.readyState == 0) {onState(0);}
	            if (http.readyState == 1) {onState(1);}
	            if (http.readyState == 2) {onState(2);}
	            if (http.readyState == 3) {onState(3);}
	            if (http.readyState == 4) {onState(4);}
	            if (http.status == 200) {onStatusOK(http.responseXML);}
	            if (http.status != 200) {onStatusError();}
            }
            http.send(null);
    }
    
    function onStatusOK(xml)
    {   
        _positions = xml.firstChild.childNodes;
        fillPositions();
        $get('loading').style.display = 'none';
    }
    
    function onStatusError()
    {
        $get('statusLabel').innerHTML = 'Service Down';
        $get('loading').style.display = 'none';
    }
    
    function onState(value)
    {
        var states = new Array('Uninitialized','Loading','Loaded','Interactive','Complete');
        $get('statusLabel').innerHTML = states[value];       
        $get('loading').style.display = 'none';
    }
    
    function clearPositions()
    {
        for (var i=0;i<_pageSize;i++)
        {
            $get('position' + i).style.display = 'none';
        }
    }
    
    function fillPositions()
    {
        clearPositions();
        
        var increment = ((_actualPage * _pageSize) - _pageSize);
        
        setPageButtons();
        
        for (var i=0;i<_pageSize;i++)
        {
            $get('position' + i).style.display = 'none';
            var pos = i + increment;            
            if (typeof _positions[pos] != typeof undefined)
            {
                $get('position-name' + i).innerHTML = _positions[pos].selectSingleNode('JobTitle').text;
                $get('position-ref' + i).innerHTML = _positions[pos].selectSingleNode('RefCode').text;
                $get('position' + i).style.display = 'block';
            }
        } 
    }
    
    function showPositionDetails(position)
    {
        var increment = ((_actualPage * _pageSize) - _pageSize);
        var pos = position + increment;
        System.Gadget.Settings.writeString("positionJobTitle", _positions[pos].selectSingleNode('JobTitle').text);
        System.Gadget.Settings.writeString("positionRefCode", _positions[pos].selectSingleNode('RefCode').text);
        System.Gadget.Settings.writeString("positionDescription", _positions[pos].selectSingleNode('Description').text);
        System.Gadget.Flyout.show = true;
        
    }
    
    function getPrevious()
    {        
        _actualPage--;
        fillPositions();        
    }
    
    function getNext()
    {
        _actualPage++;
        fillPositions();        
    }
    
    function setPageButtons()
    {   
        var positionsCount = 0;
        
        if (typeof _positions != typeof undefined)
            positionsCount = _positions.length;
        
        if ((positionsCount <= _pageSize) || (_actualPage*_pageSize >= positionsCount))
            _nextButton.style.display = 'none';
        else
            _nextButton.style.display = 'block';
            
        if (_actualPage <= 1 || positionsCount <= 0)
            _prevButton.style.display = 'none';
        else
            _prevButton.style.display = 'block';
            
        var totalPages = (positionsCount/_pageSize);

        if (totalPages > 1)
            $get('labelPage').innerHTML = _actualPage + '/' + Math.ceil(totalPages);
        else
            $get('labelPage').innerHTML = '';
    }
    
    function getHTTPObject() {
        if (typeof XMLHttpRequest != 'undefined') {    
            return new XMLHttpRequest();
        }
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
        return false;
    }
    
</script>